Transformation

Matrice

La matrice permet d'effectuer n'importe quelle transformation en appliquant sur les coordonnées de la forme d'origine 2 équations.

$$x' = a\times x + c\times y + e$$ $$y' = b\times x + d\times y + f$$

la fonction matrice possède 6 paramètres matrix(a b c d e f)

$$Transformation = \begin{bmatrix} a & c & e \\\ b & d & f \end{bmatrix}$$

Translation

<rect transform="translate(30, 40)" />
<rect transform="matrix(1, 0, 0, 1, 30, 40)" />

$$Translation = \begin{bmatrix} 1 & 0 & 30 \\\ 0 & 1 & 40 \end{bmatrix}$$ $$x' = x + 30$$ $$y' = y + 40$$

Rotation

<rect transform="rotate(45)" />
<rect transform="matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)" />

$$Rotation = \begin{bmatrix} cos(\alpha) & -sin(\alpha) & 0 \\\ sin(\alpha) & cos(\alpha) & 0 \end{bmatrix}$$ $$x' = x\times cos(\alpha) - y\times sin(\alpha)$$ $$y' = x\times sin(\alpha) + y\times cos(\alpha)$$

Échelle

<rect transform="scale(0.5)" />
<rec transform="matrix(0.5, 0, 0, 0.5, 0, 0)" />

$$Échelle = \begin{bmatrix} 0.5 & 0 & 0 \\\ 0 & 0.5 & 0 \end{bmatrix}$$ $$x' = x\times0.5$$ $$y' = y\times0.5$$

Inclinaison ou cisaillement

<rect transform="skewX(-15)" />

$$Inclinaison = \begin{bmatrix} 1 & tan(\alpha) & 0 \\\ 0 & 1 & 0 \end{bmatrix}$$ $$x' = x + y\times tan(\alpha)$$ $$y' = y$$

Y

$$Inclinaison = \begin{bmatrix} 1 & 0 & 0 \\\ tan(\alpha) & 1 & 0 \end{bmatrix}$$ $$x' = x + y\times tan(\alpha)$$ $$y' = y$$

Multiples transformations

Les transformations peuvent être combinés en les ajoutant les unes à la suite des autres.

Attention toutefois le système de coordonnées tout entier est transformé lui aussi

<rect transform="rotate(30) translate(0, 40) " />

Le déplacement en x de 40px s'effectue suivant le nouvel axe x qui a subit lui aussi une rotation de 30°

Multiplication de matrice

La multiplication de matrice s'effectue en

$$Resultant = \begin{bmatrix} a & c & e \\\ b & d & f \\\ 0 & 0 & 1 \end{bmatrix} \times \begin{bmatrix} a' & c' & e' \\\ b' & d' & f' \\\ 0 & 0 & 1 \end{bmatrix} = \begin{bmatrix} a\times a' + c \times b' & a \times c' + c \times d' & a \times e' + c \times f' + e \\\ b\times a' + d \times b' & b \times c' + d \times d' & b \times e' + d \times f' + f \\\ 0 & 0 & 1 \end{bmatrix}$$ $$Transformation = \begin{bmatrix} cos(30) & -sin(30) & 0 \\\ sin(30) & cos(30) & 0 \\\ 0 & 0 & 1 \end{bmatrix} \times \begin{bmatrix} 1 & 0 & 40 \\\ 0 & 1 & 0 \\\ 0 & 0 & 1 \end{bmatrix} = \begin{bmatrix} cos(30) & -sin(30) & cos(30) \times 40 \\\ sin(30) & cos(30) & sin(30) \times 40 \\\ 0 & 0 & 1\end{bmatrix}$$

Origine de la transformation

la propriété transform-origin permet de sélectionner l'origine de la transformation. C'est très utile dans le cas des rotations.

<rect x="50" y="25"  width="100" height="100"
transform="rotate(45)"  transform-origin="100 75"/>

L'origine de la transformation est située au milieu du carré.

Projection isométrique